<template>
  <div class="friendListWrap">
    <div
      class="friendItem"
      v-for="item in friendData"
      :key="item.id"
      :class="{ highClass: item.chatCode == $route.query.chatCode }"
      @click="selectItem(item)"
    >
      <Header :src="item.base+item.headImg"/>
      <span class="friendName">{{ item.userRemarks || item.userName || item.chatCode }}</span>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import api from "@/api/index.js";
import Header from "../comp/Header.vue";
export default {
  components: {
    Header
  },
  props: {},
  data() {
    return {
      friendData: [],
    };
  },
  mounted() {
    this.friendList();
  },
  methods: {
    friendList() {
      const params = {
        chatCode: JSON.parse(localStorage.userInfo).chatCode
      }
      api.friendList(params).then((res) => {
        const result = res.data;
        if (result.code == 0) {
          this.friendData = result.data;
          if (this.$route.query.chatCode) {
            this.friendData.forEach((element) => {
              if (element.chatCode == this.$route.query.chatCode) {
                this.selectItem(element);
              }
            })
          }
        }
      });
    },
    selectItem(item) {
      this.$emit("click", item);
    }
  },
  watch: {
    '$store.state.friendData': {
      handler: function(n, o) {
        this.friendData.push(n);
      },
      deep: true
    }
  }
};
</script>

<style lang='scss' scoped>
.friendListWrap {
  position: relative;
  .friendItem {
    display: flex;
    align-items: center;
    padding: 10px;
    &:hover {
      background: #cac8c6;
    }
    &.highClass {
      background: #cac8c6;
    }
    .friendName {
      margin-left: 10px;
      font-size: 15px;
    }
  }
}
</style>